import React, { Component } from 'react'
import '../../../../static/css/clientMessage.less'

import { Collapse } from 'antd'
const { Panel } = Collapse

class ClientMessageList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                { title: '消息标题', submitter: '好友', date: '2021-12-20', content: '123123332', no: '123' },
                { title: '消息标题', submitter: '好友', date: '', content: '123132', no: '13' },
                { title: '消息标题', submitter: '好友', date: '', content: '12312312', no: '12' },
            ]
        }
    }
    compareInfo(item) {
        console.log(item)
        return item.title + '  |  ' + item.date
    }

    render() {
        var items = this.state.list
        return (
            <div>
                <Collapse>
                    {
                        items.map((item) =>
                            <Panel key={item.no} header={this.compareInfo(item)}>
                                <div className="MessageInfo">
                                    <p>消息标题:{item.title}</p>
                                    <p>发送人:{item.submitter}</p>
                                    <p>发送日期:{item.date}</p>
                                </div>
                                <div className="MessageContent">
                                    <p>{item.content}</p>
                                </div>
                            </Panel>
                        )
                    }
                </Collapse>
            </div>
        )
    }
}

export default ClientMessageList
